<template>
  <div class="batch-test">
    <h2>批次管理API测试页面</h2>
    
    <div class="test-section">
      <h3>API测试</h3>
      <div class="button-group">
        <el-button @click="testConnection" type="primary">测试数据库连接</el-button>
        <el-button @click="testGetSimpleGoodsList" type="success">获取简单货品列表</el-button>
        <el-button @click="testGetBatchPage" type="warning">测试批次分页查询</el-button>
        <el-button @click="testGetBatchDetail" type="info">测试获取批次详情</el-button>
        <el-button @click="testExportBatch" type="danger">测试导出批次</el-button>
      </div>
    </div>

    <div class="result-section">
      <h3>测试结果</h3>
      <el-card>
        <pre>{{ testResult }}</pre>
      </el-card>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import { testConnection, getSimpleGoodsList, getBatchPage, getBatchDetail, exportBatch } from '/@/api/batch/batch'

const testResult = ref('点击上方按钮开始测试...')

// 测试数据库连接
const testConnection = async () => {
  try {
    testResult.value = '正在测试数据库连接...'
    const response = await testConnection()
    testResult.value = JSON.stringify(response, null, 2)
    ElMessage.success('数据库连接测试成功')
  } catch (error) {
    testResult.value = `数据库连接测试失败: ${error}`
    ElMessage.error('数据库连接测试失败')
  }
}

// 测试获取简单货品列表
const testGetSimpleGoodsList = async () => {
  try {
    testResult.value = '正在获取简单货品列表...'
    const response = await getSimpleGoodsList()
    testResult.value = JSON.stringify(response, null, 2)
    ElMessage.success('获取简单货品列表成功')
  } catch (error) {
    testResult.value = `获取简单货品列表失败: ${error}`
    ElMessage.error('获取简单货品列表失败')
  }
}

// 测试批次分页查询
const testGetBatchPage = async () => {
  try {
    testResult.value = '正在测试批次分页查询...'
    const response = await getBatchPage({
      page: 1,
      pageSize: 10,
      goodsName: '',
      goodsType: '',
      unit: '',
      batch: '',
      warehouseName: '',
      productionDateStart: null,
      productionDateEnd: null,
      expirationDateStart: null,
      expirationDateEnd: null
    })
    testResult.value = JSON.stringify(response, null, 2)
    ElMessage.success('批次分页查询测试成功')
  } catch (error) {
    testResult.value = `批次分页查询测试失败: ${error}`
    ElMessage.error('批次分页查询测试失败')
  }
}

// 测试获取批次详情
const testGetBatchDetail = async () => {
  try {
    testResult.value = '正在测试获取批次详情...'
    const response = await getBatchDetail(1)
    testResult.value = JSON.stringify(response, null, 2)
    ElMessage.success('获取批次详情测试成功')
  } catch (error) {
    testResult.value = `获取批次详情测试失败: ${error}`
    ElMessage.error('获取批次详情测试失败')
  }
}

// 测试导出批次
const testExportBatch = async () => {
  try {
    testResult.value = '正在测试导出批次...'
    const response = await exportBatch({
      page: 1,
      pageSize: 10,
      goodsName: '',
      goodsType: '',
      unit: '',
      batch: '',
      warehouseName: '',
      productionDateStart: null,
      productionDateEnd: null,
      expirationDateStart: null,
      expirationDateEnd: null
    })
    testResult.value = `导出批次测试成功，响应类型: ${typeof response.data}`
    ElMessage.success('导出批次测试成功')
  } catch (error) {
    testResult.value = `导出批次测试失败: ${error}`
    ElMessage.error('导出批次测试失败')
  }
}
</script>

<style scoped>
.batch-test {
  padding: 20px;
}

.test-section {
  margin-bottom: 30px;
}

.test-section h3 {
  margin-bottom: 15px;
  color: #409eff;
}

.button-group {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.result-section h3 {
  margin-bottom: 15px;
  color: #67c23a;
}

.el-card {
  margin-top: 10px;
}

pre {
  background: #f5f5f5;
  padding: 15px;
  border-radius: 4px;
  overflow-x: auto;
  font-size: 12px;
  max-height: 400px;
  white-space: pre-wrap;
}
</style>